import React, {useEffect} from 'react';
import {Space, Table,Tooltip,Button} from "antd";
import {FormOutlined,DeleteOutlined} from "@ant-design/icons";
import {useAppDispatch} from "@/hooks";
import {getHospitalSetAsync, useSelectorHosp} from "@/store/slices/hosp";
import {useSelectorCommon} from "@/store/slices/common";

function Index() {
    const dispatch = useAppDispatch();
    const {hospitalSetList} = useSelectorHosp();
    const {pageInfo} = useSelectorCommon();
    useEffect(()=>{
        dispatch(getHospitalSetAsync(1,4));
    },[])
    return (
        <div>
            {/*<div style={{ marginBottom: 16 }}>*/}
            {/*    <Button type="primary" onClick={start} disabled={!hasSelected} loading={loading}>*/}
            {/*        Reload*/}
            {/*    </Button>*/}
            {/*    <span style={{ marginLeft: 8 }}>*/}
            {/*        {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}*/}
            {/*    </span>*/}
            {/*</div>*/}
            <Table
                pagination={{
                   ...pageInfo,
                    onChange(page,pageSize){
                        dispatch(getHospitalSetAsync(page,pageSize));
                    }
                }}
                // 增加边框
                bordered={true}
                // 指定横向的宽度
                scroll={{
                    x:1500
                }}
                // rowSelection={rowSelection}
                columns={[
                    {
                        title:"序号",
                        align:"center",
                        width:70,
                        // dataIndex:"id",
                        // 如果设置了dataIndex,那么render的第一个形参即是dataIndex对应的属性值
                        // 如果未设置dataIndex,那么render的第一个形参即是行信息

                        // 第二个参数是行信息
                        render(value,rows,index){
                            console.log(index)
                            return (pageInfo.current-1)*pageInfo.pageSize+index+1;
                        }
                    },{
                        title:"医院名称",
                        align:"center",
                        ellipsis:true,
                        width:200,
                        dataIndex:"hosname"
                    },{
                        title:"医院编号",
                        align:"center",
                        width:140,
                        ellipsis:true,
                        dataIndex:"hoscode"
                    },{
                        title:"是否锁定",
                        align:"center",
                        dataIndex:"status"
                    },{
                        title:"api基础地址",
                        align:"center",
                        width:140,
                        dataIndex:"apiUrl"
                    },{
                        title:"密钥",
                        align:"center",
                        width:140,
                        ellipsis:true,
                        dataIndex:"signKey"
                    },{
                        title:"联系人姓名",
                        align:"center",
                        dataIndex:"contactsName"
                    },{
                        title:"联系人手机",
                        align:"center",
                        dataIndex:"contactsPhone"
                    },{
                        title:"添加时间",
                        align:"center",
                        width:160,
                        dataIndex:"createTime"
                    },{
                        title:"修改时间",
                        align:"center",
                        width:160,
                        dataIndex:"updateTime"
                    },{
                        title:"操作",
                        fixed:"right",
                        // dataIndex:"updateTime"
                        render(){
                            return (
                                <Space>
                                    <Tooltip title="修改">
                                        <Button type="primary" shape="circle" icon={<FormOutlined />} />
                                    </Tooltip>
                                    <Tooltip title="删除">
                                        <Button danger type="primary" shape="circle" icon={<DeleteOutlined />} />
                                    </Tooltip>
                                </Space>
                            )
                        }
                    }
                ]}
                rowKey={"id"}
                dataSource={hospitalSetList}
            />
        </div>
    );
}

export default Index;